import React, { Component } from 'react';
import "../styles/Brand.scss"
import { NavBar, Space, JumboTabs } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'
import * as service from "../api/index"

class Brand extends Component {
    constructor(props) {
        super(props);
        this.state = {
            right: (
                <div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <SearchOutline onClick={()=>{this.props.history.push('/search')}}/>
                    </Space>
                </div>
            ),
            shopList:[]
        }
    }
    async componentDidMount(){
        var res = await service.shopList();
        this.setState({shopList:res.data});
    }
    render() {
        return (
            <div className='brand'>
                <NavBar className='navbar' right={this.state.right} onBack={() => { this.props.history.go(-1) }}>精选品牌</NavBar>
                <JumboTabs>
                    <JumboTabs.Tab title='全部' key='/all' />
                    <JumboTabs.Tab title='手机' key='/phone' />
                    <JumboTabs.Tab title='食品' key='/food' />
                    <JumboTabs.Tab title='美妆' key='/makeup' />
                    <JumboTabs.Tab title='生鲜' key='/fresh' />
                    <JumboTabs.Tab title='酒水' key='/alcohol' />
                    <JumboTabs.Tab title='女装' key='/women' />
                    <JumboTabs.Tab title='男装' key='/men' />
                </JumboTabs>
                <div className="brands">
                    {
                        this.state.shopList.map((item,index)=>{
                            return (
                                <div className="shop" key={index}>
                                    <div className="top">
                                        <div className="left">
                                            <div className="pic"><img src={item.pic} alt="" /></div>
                                            <div className="text">
                                                <div className="name">{item.name}</div>
                                                <div className="discount">{item.discount}</div>
                                            </div>
                                        </div>
                                        <div className="right">
                                            <p className="p1">{item.num}</p>
                                            <p className="p2">宝贝</p>
                                        </div>
                                    </div>
                                    <div className="content">
                                        <div className="item">
                                            <div className="goodpic"><img src={item.goodpic} alt="" /></div>
                                            <div className="price">到手价<span>￥{item.price}</span></div>
                                            <div className="oldprice">￥{item.oldprice}</div>
                                        </div>
                                        <div className="item">
                                            <div className="goodpic"><img src={item.goodpic} alt="" /></div>
                                            <div className="price">到手价<span>￥{item.price}</span></div>
                                            <div className="oldprice">￥{item.oldprice}</div>
                                        </div>
                                        <div className="item">
                                            <div className="goodpic"><img src={item.goodpic} alt="" /></div>
                                            <div className="price">到手价<span>￥{item.price}</span></div>
                                            <div className="oldprice">￥{item.oldprice}</div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Brand;